<template>
    <div class="app-container">
        <levelbar></levelbar>
        <div class="content">
            <div class="table-title">
                <div class="btnPosition">
                    <el-button @click="goback">返回</el-button>
                </div>
            </div>
            <el-table :data="AnnounceList" border style="width: 100%" @selection-change="handleSelectionChange" v-loading="loading" ref="multipleTable">
                <el-table-column label="排名" align="center" prop="sRank">
                </el-table-column>
                <el-table-column label="姓名" align="center" prop="studentName">
                </el-table-column>

                <el-table-column :key='index' v-for='(item,index) in formThead' :label="item.subjectName" align="center">
                    <template scope="scope">
                        {{scope.row.eduScoreDetailDTOs[index].sSubjectScore}}
                    </template>
                </el-table-column>

                <el-table-column label="总分" align="center" prop="sTotalScore">
                </el-table-column>
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="listQuery.total" :current-page.sync="listQuery.page" :page-sizes="config.pageSizes" :page-size="config.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import { queryListScoreStudentByPage } from 'api/gradeManagement';
import Levelbar from '../../layout/Levelbar';
import TableLayout from 'components/TableLayout';
import { mapState, mapActions, mapGetters } from 'vuex';

export default {
    name: 'gradeDetail',
    components: { Levelbar, TableLayout},
    data() {
        return {
            // tableData: [{
            //     name: '水果',
            //     list: [{ name: 'apple', value: 10 }, { name: 'banana', value: 20 }, { name: 'orange', value: 20 }]
            // }, {
            //     name: '水果2',
            //     list: [{ name: 'apple2', value: 12 }, { name: 'banana2', value: 22 }, { name: 'orange', value: 20 }]
            // }],
            formThead: [],
            mydata: [],
            pId: '',
            fSchoolId: '',
            loading: true,
            AnnounceList: [], // 数据列表
            dataNum: 1, // 表格1显示条数，初始为1
            listQuery: {// 分页
                page: 1,
                total: 0
            },
            multipleSelection: [] // 勾选的表格的项目
        }
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        }),
        ...mapGetters([
            'uid'
        ])
    },
    // 初始化
    created() {
        this.pId = this.$route.params.pId;
        this.fSchoolId = this.$route.params.fSchoolId;
        this.searchFetchData(this.pId, this.fSchoolId);
    },
    methods: {
        // 全局获取行数
        ...mapActions(['ChangePageSize']),
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 分页
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.loading = true;
            this.ChangePageSize(val);
            this.searchFetchData(this.pId, this.fSchoolId);
        },
        handleCurrentChange(val) {
            this.loading = true;
            this.listQuery.page = val;
            this.searchFetchData(this.pId, this.fSchoolId);
        },
        // 查询列表
        searchFetchData(pId, fSchoolId) {
            queryListScoreStudentByPage(this.listQuery.page, this.config.pageSize, pId, fSchoolId).then(response => {
                this.AnnounceList = response.data.content.list;
                // this.AnnounceList.forEach((item, index) => {
                    
                //     var newArr = Object.values(item.eduScoreDetailDTOs).sort((a, b) => a.length <= b.length);
                //     //console.log('newArr', newArr);
                //     item.eduScoreDetailDTOs.forEach((itm, idx) => {
                //         //console.log('item', item[index][idx]);
                //         // this.mydata.push(item[index][idx]);
                //     })
                //     this.formThead.push(item.eduScoreDetailDTOs);
                // });

                this.listQuery.total = response.data.content.pagination.total;
                if (response.data.content.list.length > 0) {
                    this.formThead = response.data.content.list[0].eduScoreDetailDTOs;
                }
                // this.formThead = response.data.content.list[0].eduScoreDetailDTOs;
                this.loading = false;
            });
        },
        goback() {
            this.$router.go(-1);
        }
    }
}
</script>
<style lang="scss" scoped>
.el-message-box__message {
    p {
        font-size: 18px;
        color: #333;
        text-align: center;
    }
}
.el-message-box__btns {
    text-align: center;
}
.content {
    position: relative;
    padding: 0 20px;
    background: #fff;
    box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    .table-title{
        padding: 13px 0;
    }
}
</style>